<template>
  <!-- 老师改卷列表页面 这个n-tabs会报错误-->
  <div class="class-mg">
    <div style="margin: 10px;">
      <n-tabs v-model:value=activeTab>
        <template #prefix >
          <span style="font-family: '楷体';font-weight: 800;font-size: 16px;">我的班级:</span>
        </template>
        <n-tab-pane v-for="(item, index) in pageData" on-update:value :key="index" :name="index" :tab="item.className">
          <el-table :data="item.studentPaperVoList" style="width: 100%;border-radius: 10px;">
                <el-table-column prop="examName" label="考试名" width="250"></el-table-column>
                <el-table-column prop="studentName" label="学生姓名" width="180"></el-table-column>
                <el-table-column prop="consequence" label="状态" width="180"></el-table-column>
                <el-table-column label="批改" #default="data">
                    <!-- 确认删除 -->
                            <img src="/src/assets/svg/pencil.svg" class="img-onclick" @click="onPG(data.row.answerSheetId)">
                </el-table-column>
            </el-table>

        </n-tab-pane>
        <template #suffix>
          <img src="/src/assets/svg/read-book.svg">
        </template>

      </n-tabs>
    </div>
  </div>

</template>

<script setup>
import teacherHttp from '@/api/teacherHttp';
import { onMounted, ref } from 'vue';
import useUserStore from '@/stores/useUserStore';
import { useRouter } from 'vue-router';
const userStore = useUserStore()
const router = useRouter()
//页面数据
const pageData = ref([])
const  activeName = ref(1)
const activeTab = ref(0)
onMounted(() => {
  getCorrectTestPaper()
})

//获取数据
function getCorrectTestPaper() {
  teacherHttp.getCorrectTestPaper(userStore.userInfo.userId).then((res) => {
    pageData.value = res.data
    console.log(res);
  })
}

//点击进入批改试卷的页面
function onPG(answerSheetId){
  //通过答卷id跳转页面批改试卷
console.log(answerSheetId);
router.push({name:'CheckExam',params:{answerSheetId:answerSheetId}})

}

</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
  background-color: rgb(182, 174, 174, 0.1);
  display: flex;
  flex-direction: column;

  height: 900px;
  border-radius: 10px;
}

/* 关闭弹窗键 */
.img-onclick {
    transition: transform 0.3s ease;
    cursor: pointer;
    margin-left: 10px;
}

.img-onclick:hover {
    transform: scale(1.2);
}
</style>